<template>
  <div class="content">
    <el-card shadow="always">
      <el-row type="flex" justify="space-between">
        <!-- 头部左侧 -->
        <el-col :span="3">
          <el-button size="small" type="primary" @click="isshowbroker = true">
            添加账户
          </el-button>
        </el-col>
        <!-- 头部右侧 -->
        <el-col :span="10">
          <div>
            <el-input v-model="input3" placeholder="请输入内容" class="input-with-select" style="border-radius:25px;">

              <el-select slot="prepend" v-model="select" placeholder="请选择" style="border-radius: 25px;">
                <el-option value="" label="全部经纪人" />
                <el-option
                  v-for="item in arrlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-button slot="append" style="border-radius: 30px;" @click="shaixuan">
                筛选
              </el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <hr style="margin:20px 0 20px 0;">
      <!-- 中间表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >

        <el-table-column
          prop="date"
          label="图片"
          width="180"
        >
          <template #default="{row}">
            <img :src="row.image" alt="" style="width:100%">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="agent.name"
          label="经纪人"
        />
        <el-table-column
          prop="wechat"
          label="微信"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template #default="{row}">
            <el-button size="small" type="primary" @click="editclient(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleclient(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <hr style="margin:20px 0 20px 0;">
      <!-- 分页组件0 -->
      <el-pagination
        style="margin: auto;width:100px"
        small
        layout="total,prev, pager, next"
        :total="count"
        :page-size="page._limit"
        :current-page="page._start"
        @current-change="currentChange"
      />
      <!-- 新增弹框 -->
      <el-dialog :close-on-click-modal="false" :visible="isshowbroker" :title="formLabelAlign.id?'编辑':'新增'" @close="btnbackne">
        <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" :rules="rules">
          经纪：
          <el-select v-model="formLabelAlign.agent" class="filter-item">
            <el-option
              v-for="item in arrlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="formLabelAlign.email" />
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="formLabelAlign.phone" />
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="formLabelAlign.wechat" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="formLabelAlign.desc" />
          </el-form-item>
        </el-form>
        封面：
        <Imgupload ref="imgupload" />
        <el-row type="flex" justify="end">
          <el-button size="small" @click="btnbackne">取消</el-button>
          <el-button size="small" type="primary" :disabled="btnshow" @click="btnOK">确认</el-button>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Imgupload from '@/components/ImgUpload'
import { agentsclients, countclients, dectclients, dectclientslist, deleteclients, getclients, postclients } from '@/api/client'
export default {
  components: {
    Imgupload
  },
  data() {
    return {
      labelPosition: 'top',
      arrlist: [],
      formLabelAlign: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      isshowbroker: false,
      input3: '',
      select: '',
      imageUrl: '',
      // 页面数据渲染
      tableData: [],
      dialogVisible: false,
      dialogImageUrl: [],
      // 按钮显示隐藏
      btnshow: false,
      rules: {
        // 表单验证
        // name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        name: [
          { required: true, message: '姓名', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述', trigger: 'blur' }
        ]
      },
      page: {
        _limit: 2,
        _start: 1
      },
      count: 1,
      pagesize: 1,
      selectlist: '',
      sechart: ''

    }
  },
  async created() {
    await this.getclients()
  },
  methods: {
    // 数据渲染
    async getclients(input3, agent) {
      let data
      let returls
      if (agent) {
        data = await getclients({ name_contains: input3, agent_contains: agent, _limit: this.page._limit, _start: (this.page._start - 1) * this.page._limit })
        returls = await countclients({ agent_contains: agent, name_contains: input3 })
      } else {
        data = await getclients({ name_contains: input3, _limit: this.page._limit, _start: (this.page._start - 1) * this.page._limit })
        returls = await countclients({ name_contains: input3 })
      }
      const res = await agentsclients(-1)
      // const returls = await countclients({ name_contains: input3, agent_contains: agent })
      // console.log(190, returls)
      this.arrlist = res.data
      // console.log(191, data)
      this.count = returls.data
      this.tableData = data.data
    },
    // 新增弹框确认取消
    async  btnbackne() {
      await this.$refs.formLabelAlign.resetFields()
      this.isshowbroker = false
      this.formLabelAlign = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      this.$refs.imgupload.fileList = []
      this.$refs.formLabelAlign.resetFields()
    },
    // 确认按钮
    async btnOK() {
      await this.$refs.formLabelAlign.validate()
      this.btnshow = true
      const fileList = this.$refs.imgupload.fileList
      if (this.formLabelAlign.id) {
        await dectclientslist({ ...this.formLabelAlign, image: fileList[0] ? fileList[0].url : '' })
        this.$message.success('数据编辑成功')
        this.isshowbroker = false
        setTimeout(() => {
          this.btnshow = false
        }, 1000)
      } else {
        await postclients({ ...this.formLabelAlign, image: fileList[0] ? fileList[0].url : '' })
        this.$message.success('数据添加成功')
        this.isshowbroker = false
        setTimeout(() => {
          this.btnshow = false
        }, 1000)
      }
      this.page._start = 1
      this.getclients(this.sechart, this.selectlist)
      this.formLabelAlign = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      this.$refs.imgupload.fileList = []
    },
    // 编辑事件
    async editclient(id) {
      // this.btnshow = false
      const { data } = await dectclients(id)
      this.isshowbroker = true
      this.formLabelAlign = data
      this.formLabelAlign.agent = data?.agent?.id
      this.$nextTick(() => {
        this.$refs.imgupload.fileList = [{ url: this.formLabelAlign.image }]
      })
    },
    // 删除事件
    async deleclient(id) {
      await this.$confirm('确认删除吗')
      await deleteclients(id)
      this.$message.success('删除成功')
      if ((this.count % this.page._limit) === 1) {
        // 如果当前没有数据就页面就跳跳到上一页
        // 并且页面大于1才行
        this.page._start > 1 ? this.page._start-- : this.page._start = 1
      }
      this.getclients(this.sechart, this.selectlist)
    },
    // 页面条数变化
    currentChange(newpage) {
      this.page._start = newpage
      // 页面点击的时候需要重新拉去数据
      this.getclients(this.sechart, this.selectlist)
    },
    // 筛选
    shaixuan() {
      this.page._start = 1
      // 页面点击的时候需要重新拉去数据
      this.sechart = this.input3
      this.selectlist = this.select
      this.getclients(this.sechart, this.selectlist)
    }

  }
}
</script>

<style>

</style>
<style lang="scss" scoped>

 .content{
   padding: 20px;

 }
 ::v-deep .el-select .el-input  {
    width: 130px;

  }
  ::v-deep .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
